<template>
	<view class="member_center">

		<view class="member_nav" v-if="topMenu">
			<u-navbar title="我的" :autoBack="true" v-if="bright" :bgColor="bgColor" leftIconColor="#000000" style="color: #000;" height="44"></u-navbar>
			<u-navbar title="我的" :autoBack="true" v-else :bgColor="bgColor" leftIconColor="#ffffff" style="color: #fff;" height="44"></u-navbar>
		</view>

		<view class="member_scroll" :animation="animationData">
			<u-navbar leftText="返回" :autoBack="true" height="44">
				<view class="u-nav-slot dflex scrollLogo aic" slot="left">
					<u-icon name="arrow-left" size="24"></u-icon>
					<image :src="avatarSrc" class="border_ccc" mode="aspectFill"></image>
					<text class="f14 fbold u-line-1" style="max-width: 150px;">{{ userName }}</text>
				</view>
			</u-navbar>
		</view>


		<view class="member_banner">
			<u-image :showLoading="true" :src="bannerSrc" :width="sysWidth" height="180"></u-image>
			
			<canvas canvas-id="myCanvas" style="width:100%;height:100%;"></canvas>
		</view>

		<!-- 微信注册 gotoWxRegister -->
		<view class="user_info_box" v-if="!loginCheck" @click="gotoRegister">
			<view class="user_avatar">
				<image :src="avatarSrc" class="w75" mode="aspectFill"></image>
			</view>
			<view class="user_info">
				<view class="user_info_text">
					<text>86</text>
					<text>关注</text>
				</view>
				<view class="user_info_text">
					<text>227</text>
					<text>粉丝</text>
				</view>
			</view>
			<view class="user_button">
				<view class="user_button_box user_followed">
					<text>已关注</text>
					<u-icon name="checkbox-mark" color="#333" size="14px"></u-icon>
				</view>
				<view class="user_button_box">
					<text>编辑</text>
					<u-icon name="list" color="#333" size="14px"></u-icon>
				</view>
			</view>
		</view>

		<view class="user_info_box" v-else>
			<view class="user_avatar" @click="openBigAvatar">
				<image :src="avatarSrc" class="w75" mode="aspectFill"></image>
			</view>
			<view class="user_info">
				<view class="user_info_text" @click="gotoFollowings" :data-currentuid="userId">
					<text>{{ count_followings }}</text>
					<text>关注</text>
				</view>
				<view class="user_info_text" @click="gotoFollowers" :data-currentuid="userId">
					<text>{{ count_followers }}</text>
					<text>粉丝</text>
				</view>
			</view>
			<view class="user_button">
				<view class="user_button_box" @click="toProfile">
					<text>编辑</text>
					<u-icon name="list" color="#333" size="14px"></u-icon>
				</view>
			</view>
		</view>

		<view class="user_name_and_medal">
			<view class="user_name">
				<view class="dflex aib">
					<text class="f18 fbold">{{ userName }}(ID:{{ userId }})</text>
				</view>
				<view class="dflex mt5 f14" v-if="loginCheck && onlineCheck == 1">
					<view v-if="identStatus == ''" class="dflex" @click="openIdent">
						<u-icon name="checkmark-circle-fill" color="#ccc" size="16"></u-icon>
						<text class="ml5 f14 ca3a3a3">点此认证</text>
					</view>
					<view v-else-if="identStatus == 5" class="dflex" @click="openIdent" >
						<u-icon name="checkmark-circle-fill" color="#ccc" size="16"></u-icon>
						<text class="ml5 f14 ca3a3a3">{{ identText + "（认证中）" }}</text>
					</view>
					<view v-else-if="identStatus == 10" class="dflex">
						<u-icon name="checkmark-circle-fill" color="primary" size="16"></u-icon>
						<text class="ml5 f14" style="color:#333;">{{ identText }}</text>
					</view>
					<view v-else-if="identStatus == 15" class="dflex" @click="openIdent" >
						<u-icon name="checkmark-circle-fill" color="#ccc" size="16"></u-icon>
						<text class="ml5 f14 ca3a3a3">{{ identText + "（认证失败，点击查看原因）" }}</text>
					</view>
				</view>
			</view>
			<!-- 
			<view class="user_medal">
				<image src="/static/metal.png" mode=""></image>
			</view> 
			-->
		</view>

		<view class="user_intro cflex">
			<view class="user_desc f14 mt12">
				<text v-if="showFullIntro == true" class="u-line-3">{{intro}}</text>
				<text v-else>{{intro}}</text>
				<text v-if="moreButton == true" style="font-weight: normal; text-decoration: underline; font-size:12px" @click="fullIntro">更多...</text>
			</view>
			<view class="user_tag f12" v-if="loginCheck">
				<text>{{ tagYearSexConstellation }}</text>
			</view>
		</view>

		<view class="dflex wrap jcsb" v-if="onlineCheck == 1">
			<!-- 	<view class="dflex wrap_nt" v-if="loginCheck">		 -->
			<view class="cflex" @click="openMerchant">
				<view class="dflex aic">
					<u-icon name="home" color="#333" size="28"></u-icon>
					<text class="ml5 f14 mr5">店铺</text>
					<u-icon name="arrow-right" color="#333" size="16"></u-icon>
				</view>
				<text class="f12">发布团购点这里</text>
			</view>
			<view class="cflex" @click="openUserIncome">
				<view class="dflex aic">
					<u-icon name="rmb-circle" color="#333" size="28"></u-icon>
					<text class="ml5 f14 mr5">收益</text>
					<u-icon name="arrow-right" color="#333" size="16"></u-icon>
				</view>
				<text class="f12">赚钱推广点这里</text>
			</view>
			<view class="cflex" @click="openUserOrder">
				<view class="dflex aic">
					<u-icon name="shopping-cart" color="#333" size="28"></u-icon>
					<text class="ml5 f14 mr5">订单</text>
					<u-icon name="arrow-right" color="#333" size="16"></u-icon>
				</view>
				<text class="f12">团购美食点这里</text>
			</view>
		</view>
		

		<u-sticky :customNavHeight="customNavHeight" v-if="loginCheck">
			<view class="wrap_ntb border_bottom_eee" style="background-color: #fff; padding: 0 0 5px 0;">
				<u-tabs 
					@click="clickMemberList" 
					:list="memberList" 
					:activeStyle="{fontWeight: 'bold', transform: 'scale(1.05)'}" 
					:inactiveStyle="{fontSize: '14px'}" 
					lineWidth="25" 
					lineHeight="5" 
					lineColor="#FFD84A"
				>
				</u-tabs>
			</view>
			<view class="dflex bg_fff" v-if="show_collections_type">				
				<u-tabs 
					@click="fav_list_tab"
					:list="fav_list" 
					:activeStyle="{
						fontWeight: 'bold', 
						backgroundColor: '#FFD84A', 
						padding: '5px 15px',
						color : '#333',
						borderRadius : '10px'
					}"
					:inactiveStyle="{
						fontSize: '14px', 
						padding: '5px 15px',
					}"
					lineWidth="25" 
					lineHeight="5" 
					lineColor="#fff" 
					height="30px"
				>
				</u-tabs>
			</view>
		</u-sticky>

		<u-sticky :customNavHeight="customNavHeight" v-else>
			<view class="wrap_ntb" style="background-color: #fff; padding: 0 0 5px 0;">
				<u-tabs :list="memberList" :activeStyle="{fontWeight: 'bold', transform: 'scale(1.05)'}" :inactiveStyle="{fontSize: '14px'}" lineWidth="25" lineHeight="5" lineColor="#FFD84A">
				</u-tabs>
			</view>
		</u-sticky>

		<view v-if="loginCheck">
			
			<view class="waterfall-box h-flex-x h-flex-2" v-if="type=='goods'">
				<view>
					<helang-waterfall-goods v-for="(item,index) in leftList" :key="index" :params="item" tag="left"
						:index="index" @height="onHeight" @click="onClickGoods"></helang-waterfall-goods>
				</view>
				<view>
					<helang-waterfall-goods v-for="(item,index) in rightList" :key="index" :params="item" @height="onHeight"
						@click="onClickGoods" tag="right" :index="index"></helang-waterfall-goods>
				</view>
			</view>
			
			<view class="waterfall-box h-flex-x h-flex-2" v-else-if="type=='merchant'">
				<view>
					<helang-waterfall-merchants v-for="(item,index) in leftList" :key="index" :params="item" tag="left"
						:index="index" @height="onHeight" @click="onClickMerchant"></helang-waterfall-merchants>
				</view>
				<view>
					<helang-waterfall-merchants v-for="(item,index) in rightList" :key="index" :params="item" @height="onHeight"
						@click="onClickMerchant" tag="right" :index="index"></helang-waterfall-merchants>
				</view>
			</view>
			
			<view class="waterfall-box h-flex-x h-flex-2" v-else>
				<view>
					<helang-waterfall v-for="(item,index) in leftList" :key="index" :params="item" tag="left"
						:index="index" @height="onHeight" @click="onClick"></helang-waterfall>
				</view>
				<view>
					<helang-waterfall v-for="(item,index) in rightList" :key="index" :params="item" @height="onHeight"
						@click="onClick" tag="right" :index="index"></helang-waterfall>
				</view>
			</view>
			<view class="load-txt">{{ajax.loadTxt}}</view>
		</view>

		<view class="unlogin_button cflex aic" v-else>

			<!-- 跳转手机登录页面 -->
			<view class="dflex jcc" style="width: 40%; margin-top: 100px;" @click="gotoRegister">
				<u-button color="#FFD84A" shape="circle" throttleTime="2000">
					<text style="color: #000;">点此登录</text>
				</u-button>
			</view>

			<version></version>

		</view>

		<view class="empty_list" v-if="empty">
			<u-empty mode="data" text="啥都没有~"></u-empty>
		</view>

		<u-popup :show="showBigavatar" @close="showBigavatar=false" mode="center" :safeAreaInsetBottom="false">
			<view class="dflex">
				<image :src="avatarSrc" mode="widthFix" :style="'width: 750rpx; height: ' + bigavatar + 'px;'"></image>
			</view>
		</u-popup>

		<bottomMenu></bottomMenu>
	</view>
</template>

<script>
	

	export default {
		data() {
			return {
				bgColor: "transparent",
				bannerSrc: '',
				avatarSrc: '',
				sysWidth: '',
				memberList: [{
					name: '瞬间',
					type: 'topics'
				}, {
					name: '收藏',
					type: 'collections',
					showSec : true //显示收藏的2级菜单
				}, {
					name: '点赞',
					type: 'likes'
				}],
				fav_list : [{
					name : '瞬间',
					type : 'collections'
				},{
					name : '团购',
					type : 'goods'
				},{
					name : '店铺',
					type : 'merchant'
				}],
				// 瀑布流
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				ajax: {
					// 是否可以加载
					load: true,
					// 加载中提示文字
					loadTxt: '',
					// 每页的请求条件
					rows: 10,
					// 页码
					page: 0,
				},
				// end 瀑布流
				topMenu: true,
				customNavHeight: '',
				userName: '',
				userId: '',
				intro: '',
				showFullIntro: true,
				moreButton: true,
				count_followers: '',
				count_followings: '',
				empty: false,
				loginCheck: false,
				//初始用户空间tab值，用来拼接请求地址的，很重要
				type: 'topics',
				notifications_count: '',
				tagYearSexConstellation: '',
				sex: '',
				birthday: '',
				animationData: {},
				showLoginPop: false,
				showBigavatar: false,
				bigavatar: '',
				total_page: '',
				identText: '去认证',
				identStatus: '',
				onlineCheck: 0,
				show_collections_type : false,
				bright : false
			}
		},
		onPageScroll(e) {
			// console.log('e',e)
			if (e.scrollTop > 135) {
				this.scrollMenu = true
				this.animation_menu('down')
				this.topMenu = false
			}
			if (e.scrollTop < 135) {
				this.scrollMenu = false
				this.animation_menu('up')
				this.topMenu = true
			}
			//根据scrollTop值超过某个临界点，设置不同的css样式
			// this.scrollTop = e.scrollTop;
		},
		onLoad: function(e) {
			//获取设备宽度，100%显示顶部banner
			var sys = uni.getSystemInfoSync()
			this.sysWidth = sys.screenWidth
			this.bigavatar = sys.screenWidth
			this.customNavHeight = sys.statusBarHeight + 43
			this.online_check()
			this.user_check(e)
			// console.log('uni.getStorageSync(\'domain\')',uni.getStorageSync('domain'))
		},
		// 触底触发
		onReachBottom() {
			// console.log('aaaa',this.ajax.page)
			// console.log('cccc',this.total_page)
			// console.log('dddd',this.ajax.page <= this.total_page)
			// console.log('cccccccccccccc',this.loginCheck)
			if (this.loginCheck) {
				if (this.ajax.page <= this.total_page && this.total_page != 0) {
					this.loadUserTopic();
				}
			}
		},
		methods: {
			getColor() {
				console.log('this.shop_pic', this.bannerSrc)
				uni.getImageInfo({
				  src: this.bannerSrc, // 你需要替换为自己的图片路径
				  success: (info) => {
					// 创建canvas上下文
					const ctx = uni.createCanvasContext('myCanvas');
				
					// 绘制图片到canvas上
					ctx.drawImage(info.path, 0, 0, info.width, info.height);
				
					// 获取像素信息
					uni.canvasGetImageData({
					  canvasId: 'myCanvas',
					  x: 0,
					  y: 0,
					  width: info.width,
					  height: info.height,
					  success: (res) => {
						const pixels = res.data;
				
						// 计算图片主色
						const colorCounts = {};
						let maxCount = 0;
						let dominantColor = [0, 0, 0];
						for (let i = 0; i < pixels.length; i += 4) {
						  const r = pixels[i];
						  const g = pixels[i + 1];
						  const b = pixels[i + 2];
						  const colorKey = r + ',' + g + ',' + b;
						  if (colorKey in colorCounts) {
							colorCounts[colorKey]++;
						  } else {
							colorCounts[colorKey] = 1;
						  }
						  if (colorCounts[colorKey] > maxCount) {
							maxCount = colorCounts[colorKey];
							dominantColor = [r, g, b];
						  }
						}
				
						// 计算图片亮度
						const brightness = (0.299 * dominantColor[0] + 0.587 * dominantColor[1] + 0.114 * dominantColor[2]);
				
						// 根据图片亮度设置属性bright的值
						this.bright = brightness < 128;
						
						console.log('this.bright', this.bright)
						
						// 将canvas绘制到页面上
						ctx.draw();
					  },
					});
				  },
				});
			},
			online_check() {
				uni.request({
					url: uni.getStorageSync('domain') + '/api/v1/system/online/check',
					method: 'get',
					header: {
						'Accept': 'application/json',
					},
					success: (res) => {
						this.onlineCheck = res.data.status
						uni.hideLoading();
					},
					fail: (res) => {}
				})
			},
			fav_list_tab(e) {
				//清空瀑布流
				let [left, right] = [
					[],
					[]
				];
				this.leftList = left;
				this.rightList = right;
				this.leftHeight = 0
				this.rightHeight = 0
				this.ajax.page = 0
				this.type = e.type
				this.loadUserTopic()
			},
			openUserIncome() {
				if(this.loginCheck) {
					uni.navigateTo({
						url: "/packageShop/income/income"
					})
				} else {
					uni.navigateTo({
						url: "/pages/register/register"
					})
				}
			},
			openUserOrder() {
				if(this.loginCheck) {
					uni.navigateTo({
						url: "/packageShop/shop/orderList"
					})
				} else {
					uni.navigateTo({
						url: "/pages/register/register"
					})
				}
			},
			openBigAvatar() {
				this.showBigavatar = true
			},
			animation_menu(res) {
				//创建动画
				var animation = uni.createAnimation({
					transformOrigin: "ease-in",
					duration: 300, //动画持续1秒
					// timingFunction: 'linear',  //linear 全程匀速运动
					// delay:300  //延迟两秒执行动画
				})
				this.animation = animation

				if (res == 'down') {
					animation.opacity(1).step()
				} else {
					animation.opacity(0).step()
				}

				this.animationData = animation.export()
			},
			getTagYearSexConstellation() {
				var memberYear = new Date(this.birthday).getFullYear();
				var memberMonth = new Date(this.birthday).getMonth() + 1;
				var memberDay = new Date(this.birthday).getDate();
				var sex = this.sex;

				var years = String(memberYear).substring(2, 3)

				// console.log('ccccccccccccccc', memberYear,memberMonth,memberDay)

				if (sex == 1) {
					var sexual = '♂︎️'
				} else {
					var sexual = '♀'
				}

				var name = "魔羯水瓶双鱼牡羊金牛双子巨蟹狮子处女天秤天蝎射手魔羯";
				var arr2 = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22];
				var constellation = name.substr(memberMonth * 2 - (memberDay < arr2[memberMonth] ? 2 : 0), 2);

				this.tagYearSexConstellation = years + '0后' + sexual + ' · ' + constellation + '座'
			},
			user_check(e) {
				uni.showLoading({
					title: "加载中...."
				})
				uni.request({
					url: uni.getStorageSync('domain') + '/api/v1/user',
					method: 'get',
					header: {
						'Accept': 'application/json',
						'Authorization': 'Bearer ' + uni.getStorageSync('access_member_info').access_token
					},
					success: (res) => {
						if (res.statusCode == 401) {
							// console.log('res', res.statusCode);
							// uni.removeStorageSync('access_token');
							// uni.navigateTo({
							// 	url: '/pages/register/register'
							// })
							this.bannerSrc = uni.getStorageSync('domain') + '/static/banner.png'
							this.avatarSrc = uni.getStorageSync('domain') + '/static/avatar.png'
							this.userName = '发现' + uni.getStorageSync('cityName')
							this.userId = '8627'
							this.ajax.loadTxt = '登录帐号,发现精彩'
							this.intro = '发现不一样的' + uni.getStorageSync('cityName') + '!'
							this.loginCheck = false
							uni.removeStorageSync('access_member_info')
						}
						if (res.statusCode == 200 || res.statusCode == 201) {
							this.loginCheck = true
							this.getUserInfo()
						}
						uni.hideLoading();
					},
					fail: (res) => {}
				})
			},
			gotoFollowings(e) {
				var uid = e.currentTarget.dataset.currentuid;
				// console.log(topicId);
				uni.navigateTo({
					url: "/pages/follow/followings?uid=" + uid + "&self=1",
				})
			},
			gotoFollowers(e) {
				var uid = e.currentTarget.dataset.currentuid;
				// console.log(topicId);
				uni.navigateTo({
					url: "/pages/follow/followers?uid=" + uid + "&self=1",
				})
			},
			getUserInfo() {
				//初始列表
				uni.showLoading({
					title: "加载中...."
				})
				uni.request({
					url: uni.getStorageSync('domain') + '/api/v1/user',
					method: 'get',
					header: {
						'Accept': 'application/json',
						'Authorization': 'Bearer ' + uni.getStorageSync('access_member_info').access_token
					},
					success: (res) => {
						// console.log('res1111111', res.data);
						this.userName = res.data.name
						this.userId = res.data.id
						this.intro = res.data.intro
						this.avatarSrc = res.data.avatar + '?' + uni.$u.random(1, 9999)
						this.bannerSrc = res.data.banner + '?' + uni.$u.random(1, 9999)
						this.sex = res.data.sex
						this.birthday = res.data.birthday
						this.count_followers = res.data.count_followers
						this.count_followings = res.data.count_followings
						this.memberList[0].name = '瞬间' + res.data.count_topics
						this.memberList[1].name = '收藏' + res.data.count_collections
						this.memberList[2].name = '点赞' + res.data.count_likes
						this.notifications_count = res.data.notifications
						this.identText = res.data.user_ident_info
						this.identStatus = res.data.user_ident_status
						this.getTagYearSexConstellation()
						this.getColor()
						this.loadUserTopic();
						uni.hideLoading();
					},
					fail: (res) => {}
				})
			},
			fullIntro() {
				this.showFullIntro = false
				this.moreButton = false
			},
			gotoRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			clickMemberList(e) {
				//清空瀑布流
				let [left, right] = [
					[],
					[]
				];
				this.leftList = left;
				this.rightList = right;
				this.leftHeight = 0
				this.rightHeight = 0
				this.ajax.page = 0
				this.type = e.type
				if(e.showSec) {
					this.show_collections_type = true
				} else {
					this.show_collections_type = false
				}
				this.loadUserTopic()
			},
			loadUserTopic() {
				uni.showLoading({
					title: "加载中...."
				})
				uni.request({
					url: uni.getStorageSync('domain') + '/api/v1/user/get_user_content/' + this.type + '?page=' + (this.ajax.page + 1),
					// url: uni.getStorageSync('domain') + '/api/v1/topics',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('access_member_info').access_token,
					},
					method: 'GET',
					data: {},
					success: res => {
						// console.log('loadIndexNew', res.data.meta.total);
						
						if(this.type == "goods" || this.type == "merchant"){
							var total = res.data.merchant.total
							var per_page = res.data.merchant.per_page	
							var last_page = res.data.merchant.last_page							
							var current_page = res.data.merchant.current_page
						} else {
							var total = res.data.meta.total
							var per_page = res.data.meta.per_page
							var last_page = res.data.meta.last_page
							var current_page = res.data.meta.current_page	
						}					
						
						
						if (total == 0) {
							this.total_page = 0
							this.ajax.loadTxt = '';
							this.empty = true
							uni.hideLoading();
						} else {
							this.total_page = last_page
							this.empty = false
							if(this.type == "goods" || this.type == "merchant"){
								this.addList(res.data.merchant)
							} else {
								this.addList(res.data)
							}
							this.ajax.page = current_page						
							if(total < per_page)								
							{
								this.ajax.loadTxt = '';
							}
							uni.hideLoading();
						}
					},
					fail: () => {},
					complete: () => {}
				});

			},
			// 监听高度变化
			onHeight(height, tag) {
				if (tag == 'left') {
					this.leftHeight += height;
				} else {
					this.rightHeight += height;
				}
			},
			// 组件点击事件
			onClick(index, tag, e) {
				var topicId = e.currentTarget.dataset.currentid;
				// console.log('cccccc', topicId);
				uni.navigateTo({
					url: "/pages/article/article2?TopicId=" + topicId
				})
			},
			// 组件点击事件
			onClickGoods(index, tag, e) {
				var gid = e.currentTarget.dataset.currentid;
				// console.log('cccccc', topicId);				
				uni.navigateTo({
					url:"/packageShop/shop/detail?gid=" + gid
				})
			},
			onClickMerchant(index, tag, e) {
				var mid = e.currentTarget.dataset.currentid;
				// console.log('cccccc', topicId);
				uni.navigateTo({
					url:"/packageShop/shop/shop?mid=" + mid
				})
			},
			// 获取数据
			addList(res) {
				// 获取到的数据，请注意数据结构
				// console.log('addList', res)
				// console.log('addList_data_length',res.data.length);

				if (res.data.length < 1) {
					this.ajax.loadTxt = '没有更多了';
					return;
				}

				// 左右列表高度的差
				let differ = this.leftHeight - this.rightHeight;
				// 计算差值，用于确定优先插入那一边
				let differVal = 0;

				// 初始化左右列表的数据
				let i = differ > 0 ? 1 : 0;

				let [left, right] = [
					[],
					[]
				];

				// 获取插入的方向
				let getDirection = (index) => {
					/* 左侧高度大于右侧超过 600px 时，则前3条数据都插入到右边 */
					if (differ >= 600 && index < 3) {
						differVal = 1;
						return 'right';
					}

					/* 右侧高度大于左侧超过 600px 时，则前3条数据都插入到左边 */
					if (differ <= -600 && index < 3) {
						differVal = -1;
						return 'left';
					}

					/* 左侧高度大于右侧超过 350px 时，则前2条数据都插入到右边 */
					if (differ >= 350 && index < 2) {
						return 'right';
					}
					/* 右侧高度大于左侧超过 350px 时，则前2条数据都插入到左边 */
					if (differ <= -350 && index < 2) {
						differVal = -1;
						return 'left';
					}

					/* 当前数据序号为偶数时，则插入到左边 */
					if ((i + differVal) % 2 == 0) {
						return 'left';
					} else {
						/* 当前数据序号为奇数时，则插入到右边 */
						return 'right';
					}
				}

				// 将数据源分为左右两个列表，容错差值请自行根据项目中的数据情况调节
				res.data.forEach((item, index) => {
					if (getDirection(index) == 'left') {
						//console.log(`差值：${differ},方向：left，序号${index}`)
						left.push(item);
					} else {
						//console.log(`差值：${differ},方向：right，序号${index}`)
						right.push(item);
					}
					i++;
				});

				this.leftList = [...this.leftList, ...left];
				this.rightList = [...this.rightList, ...right];

				this.ajax.load = true;
				this.ajax.loadTxt = '加载中...';
				this.ajax.page++;
			},
			toProfile() {
				uni.navigateTo({
					url: "/pages/member/profile"
				})
			},
			openMerchant() {
				if(this.loginCheck) {
					if(this.identStatus != 10){
						uni.showModal({
							title:"提示",
							content:"需先通过认证后才能发布商品哦！",
							success(res) {
								if(res.confirm) {
									uni.navigateTo({
										url: "/packageShop/ident/ident"
									})
								}
							}
						})
					} else {
						uni.navigateTo({
							url: "/packageShop/merchant/merchant"
						})
					}
				} else {
					uni.navigateTo({
						url: "/pages/register/register"
					})
				}
			},
			openIdent() {
				uni.navigateTo({
					url: "/packageShop/ident/ident"
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.member_center {
		position: relative;
	}

	.member_banner {
		position: relative;
		z-index: 5;
	}

	.user_info_box {
		display: flex;
		position: relative;
		margin: -30px 12px 12px 12px;
		z-index: 7;
	}

	.user_avatar image {
		width: 70px;
		height: 70px;
		border-radius: 70px;
		border: 3px solid #fff;
	}

	.user_info {
		display: flex;
		align-items: flex-end;
	}

	.user_info_text {
		display: flex;
		flex-direction: column;
		margin-left: 10px;
	}

	.user_info_text text:nth-child(1) {
		font-size: 16px;
		font-weight: bold;
	}

	.user_info_text text:nth-child(2) {
		font-size: 14px;
		color: #A8A8A8;
	}

	.user_button {
		display: flex;
		align-items: flex-end;
		flex-grow: 1;
		margin-left: 25px;
		font-size: 12px;
		justify-content: flex-end;
	}

	.user_button_box {
		display: flex;
		border-radius: 50px;
		background-color: #FAFAFA;
		border: 2px solid #333;
		height: 30px;
		padding: 0 10px;
		margin: 0 5px;
		align-items: center;
		justify-content: center;
	}

	.user_name_and_medal {
		display: flex;
		justify-content: space-between;
		margin: 20px 12px 0 12px;
	}

	.user_name {
		display: flex;
		flex-direction: column;
	}

	.user_medal image {
		width: 50px;
		height: 50px;
	}

	.user_intro {
		margin: 0 12px 5px 12px;
	}

	.user_tag {
		margin-top: 10px;
	}

	.user_tag text {
		background-color: #FAFAFA;
		padding: 2px 10px;
		border-radius: 50px;
	}

	.home_tab {
		background: #fff;
	}

	.waterfall-box {
		padding: 20rpx 10rpx;
		box-sizing: border-box;

		>view {
			padding: 0 10rpx;
		}
	}

	.h-flex-x {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		&.h-flex-2 {
			>view {
				width: 50%;
			}
		}
	}

	.load-txt {
		padding: 0 0 20rpx 0;
		text-align: center;
		color: #999;
		font-size: 24rpx;
	}

	.user_followed {
		border: 2px solid #333;
		background: #ffd84a;
	}

	.member_scroll {
		width: 100%;
		position: fixed;
		opacity: 0;
		top: 0;
		z-index: 10;
	}
</style>
